<template>
  <div class="control_left">
    <div>
      <div class="control_left_top">
        <p>在线列表：</p>
        <p>人數：{{ info.now_online_number || 0 }}</p>
      </div>
      <div class="control_left_middle">
        <div class="control_left_middle_tab">
          <p :class="[active == 1 ? 'control_left_middle_tab_active':'']" @click="tab_click(1)">客户名单</p>
          <p :class="[active == 2 ? 'control_left_middle_tab_active':'']" @click="tab_click(2)">禁言名单</p>
          <p :class="[active == 3 ? 'control_left_middle_tab_active':'']" @click="tab_click(3)">黑名单</p>
        </div>
        <el-input v-model="input" placeholder=" 请输入观众昵称"></el-input>
      </div>
      <div class="control_left_kh">
        <p>客户名单</p>
        <i class="el-icon-refresh" @click="tab_click(active)"></i>
      </div>
    </div>
    <div style="flex:1;overflow: auto;">
      <div class="control_user_chat" v-for="(item,i) in reserve_list" :key="i" v-show="item.userID.indexOf('admin')<0">
        <div>
          <div>
            <img :src="$fnc.getImgUrl(item.avatar)" alt="" />
            <p>{{item.nick}}</p>
          </div>
          <div>
            <el-button type="primary" size="mini" @click="save_restriction(item,'is_ban')">{{item.is_ban == 1 ?'取消禁言':'禁言'}}</el-button>
            <el-button type="primary" size="mini" @click="save_restriction(item,'is_black')">{{item.is_black == 1 ?'取消拉黑':'拉黑'}}</el-button>
          </div>
        </div>
        <!-- <div>
          {{item.joinTime | getTimeFormat}}
        </div> -->
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: "control_left",
  data () {
    return {
      restriction_list: [],
      active: 1,
      online_list: [],
      input: ""
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    reserve_list () {
      var arr = this.online_list;
      if (this.active == 1) {
      } else if (this.active == 2) {
        arr = [];
        this.online_list.forEach((item, i) => {
          if (item.is_ban == 1) {
            arr.push(item)
          }
        })
      } else if (this.active == 3) {
        arr = [];
        this.online_list.forEach((item, i) => {
          if (item.is_black == 1) {
            arr.push(item)
          }
        })
      }
      var text = this.input
      if (this.input && this.input != '') {
        var n_arr = [];
        arr.forEach((item, i) => {
          if (item.nick.indexOf(text) >= 0) {
            n_arr.push(item);
          }
        })
        return n_arr.reverse();
      } else {
        return arr.reverse();
      }
    },
    roomim () {
      return decodeURIComponent(this.$route.query.im);
    }
  },
  mounted () {
    //获取直播间全部成员
    this.get_allmember();
  },
  components: {},
  methods: {
    tab_click (val) {
      this.active = val;
      if (val == 1) {
        this.online_list = [];
        this.get_allmember();
      } else if (val == 2) {

      }
    },
    save_restriction (item, types) {
      var params = {};
      params.lid = this.$route.query.mid
      params.im = item.userID
      params.types = types;
      params.value = item[types] == 1 ? 0 : 1;
      this.$api.getPage.save_restriction(params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          setTimeout(() => {
            this.online_list = [];
            this.get_allmember();
          }, 1000);
        } else {
          this.$message({
            message: res.data.result,
            type: "error"
          });
        }
      })
    },
    get_allmember () {
      this.tim.getGroupMemberList({ groupID: this.roomim, count: 100, offset: this.online_list.length }).then(imResponse => {
        var arr = imResponse.data.memberList || []
        this.online_list = this.online_list.concat(arr)
        if (arr.length == 100) {
          this.get_allmember();
        } else {
          this.$api.getPage.get_restriction({ lid: this.$route.query.mid }).then(res => {
            if (res.data.code == 200) {
              this.restriction_list = res.data.result;
              this.online_list.forEach((item, i) => {
                // item.userID
                var obj = this.restriction_list.find((son, s) => {
                  return son.im == item.userID;
                })
                if (obj) {
                  this.$set(this.online_list[i], 'is_ban', obj.is_ban)
                  this.$set(this.online_list[i], 'is_black', obj.is_black)
                } else {
                  this.$set(this.online_list[i], 'is_ban', 0)
                  this.$set(this.online_list[i], 'is_black', 0)
                }
              })
            }
          })
        }
      });

    },
  }
};
</script>
<style lang="less" scoped>
.control_left {
  border: 8px solid rgb(214, 218, 225);
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-flow: column;

  .control_left_top {
    display: flex;
    font-size: 13px;
    padding: 10px;
    margin: 0 10px;
    position: relative;
    align-items: center;
    border-bottom: 1px solid rgb(214, 218, 225);
    &::after {
      content: "";
      height: 10px;
      border: 1px solid rgb(214, 218, 225);
      left: 0;
      position: absolute;
    }
    p {
      &:nth-child(3) {
        padding: 0 10px;
        margin: 0 5px;
        position: relative;
        &::after {
          content: "";
          height: 10px;
          border: 1px solid rgb(214, 218, 225);
          position: absolute;
          right: 0;
          top: 3px;
        }
        &::before {
          content: "";
          height: 10px;
          border: 1px solid rgb(214, 218, 225);
          position: absolute;
          left: 0;
          top: 3px;
        }
      }
    }
  }
  .control_left_middle {
    padding: 0 10px;
    .control_left_middle_tab:hover {
      cursor: pointer;
    }
    .control_left_middle_tab {
      display: flex;
      font-size: 13px;
      margin: 20px 0 10px 0;
      .control_left_middle_tab_active {
        position: relative;
      }
      .control_left_middle_tab_active::after {
        width: 30px;
        height: 2px;
        background-color: #409eff;
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        margin: auto;
        content: "";
      }
      // .control_left_middle_tab_active {
      //   padding-bottom: 5px;
      //   border-bottom: 2px solid #409eff;
      // }
      p {
        &:nth-child(2) {
          margin: 0 5px;
          position: relative;
          padding: 0 8px;
          border-left: 1px solid rgb(214, 218, 225);
          border-right: 1px solid rgb(214, 218, 225);
          // &::after {
          //   content: "";
          //   height: 10px;
          //   border: 1px solid rgb(214, 218, 225);
          //   position: absolute;
          //   right: 0;
          //   top: 3px;
          // }
          // &::before {
          //   content: "";
          //   height: 10px;
          //   border: 1px solid rgb(214, 218, 225);
          //   position: absolute;
          //   left: 0;
          //   top: 3px;
          // }
        }
      }
    }
    /deep/.el-input {
      padding-left: 0;
    }
    /deep/.el-input__inner {
      padding: 0;
      height: 32px;
      padding-left: 5px;
    }
  }
  .control_left_kh {
    font-size: 13px;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid rgb(214, 218, 225);
    display: flex;
    justify-content: space-between;
    align-items: center;
    > i {
      font-size: 16px;
    }
  }
  .control_user_chat {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #d6dae1;
    > div:nth-of-type(1) {
      display: flex;
      justify-content: space-between;
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          text-overflow: ellipsis;
          min-width: 70px;
          max-width: 110px;
          white-space: nowrap;
          overflow: hidden;
          text-align: left;
        }
        img {
          width: 30px;
          height: 30px;
          margin-right: 5px;
          object-fit: cover;
        }
        /deep/button {
          padding: 5px 10px;
          span {
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>
